<template>
  <div class="radar-box">
    <div class="chart-txt">
      <div class="chart-li">
        <div class="chart-item">
          <span>运费：</span>
          <span>13890</span>
        </div>
        <div class="chart-item">
          <span>时间：</span>
          <span>32天</span>
        </div>
      </div>
    <div  class="chart-li">
      <div class="chart-item">
        <span>船队利用率：</span>
        <span>80%</span>
      </div>
      <div class="chart-item">
        <span>贸易利润率：</span>
        <span>50%</span>
      </div>
    </div>

    </div>
    <div ref="myChart1" :style="{ width: '400px', height: '300px' }"></div>
  </div>

</template>

<script>
import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'BarChart',
  setup() {
    const myChart1 = ref()
    const state = reactive({
      option: {
        grid: {
          top: '14%',
          left: '2%',
          right: '15%',
          bottom: '0%',
          containLabel: true,
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '运费', max: 6500 },
            { name: '时间', max: 16000 },
            { name: '船队利润率', max: 30000 },
            { name: '贸易利润率', max: 38000 },
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000,],
                name: 'Allocated Budget'
              },
              {
                value: [5000, 14000, 28000, 26000],
                name: 'Actual Spending'
              }
            ]
          }
        ],
      },
    })
    const initeCharts = () => {
      let myChart = echarts.init(myChart1.value)
      // 绘制图表
      myChart.setOption(state.option)
    }

    onMounted(() => {
      initeCharts()
    })

    return {
      ...toRefs(state),
      myChart1
    }
  },
})
</script>

<style lang="scss" scoped>
.radar-box {
  margin-top: 24px;
}
.chart-txt {
  text-align: center;
  background: #ffffff;
  padding: 16px 34px;
  margin: 15px 15px 15px 40px;
  .chart-li {
    display: flex;
    justify-content: space-between;
    .chart-item {
      font-size: 14px;
      &:first-child {
         color: #6B7A8B;
      }
      &:last-child {
          color: #2C3749;
      }
    }
  }
}
</style>
